<template>
  <!-- Vue3组件中的模板结构没有根标签 -->
  <h1>当前求和为：{{sum}}</h1>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='!'">msg</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资：{{person.job.j1.salary}}</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增加年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
  // import {h} from 'vue'
  import { reactive, ref,watch } from 'vue'
  export default {
    name: 'Demo',
    setup() {
      //数据
      let sum = ref(0)
      let msg = ref('你好啊')
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })
      //情况一：监视ref所定义的一个响应式数据
      /* watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue);
      },{immediate:true}) */

      //情况二：监视ref所定义的多个响应式数据
      /* watch([sum,msg],(newValue,oldValue)=>{
        console.log('sum或msg变化了',newValue,oldValue);
      },{immediate:true}) */

      /* 情况三：监视reactive所定义的一个响应式数据的全部属性
          注意一：此处无法正确的获得oldValue。
          注意二：强制开启了深度监听（deep配置无效）
       */
      /* watch(()=>person.age,(newValue,oldValue)=>{ //这样子可以拿到旧值
        console.log('person变化了',newValue,oldValue);
      }) */
      /* watch(person,(newValue,oldValue)=>{
        console.log('person变化了',newValue,oldValue),{deep:false};//此处的deep配置无效
      }) */

      //情况四：监视reactive所定义的响应式数据中的某个数据
      /* watch(()=>person.age,(newValue,oldValue)=>{ 
        console.log('person的age变化了',newValue,oldValue);
      })  */
      //情况五：监视reactive所定义的响应式数据中的某些数据
      /* watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{ 
        console.log('person的name或age变化了',newValue,oldValue);
      })  */
      // 特殊情况
      watch(()=>person.job,(newValue,oldValue)=>{ 
        console.log('person的job变化了',newValue,oldValue);
      },{deep:true}) //此处由于监听的是reactive·所定义的对象中的某个属性,所以deep配置有效
      //
      return {
        sum,
        msg,
        person
      }
    },
    //vue2写法
    /* watch:{
      sum(newValue,oldValue){
        console.log('sum变化了',newValue,oldValue);
      },
      sum:{
        immediate:true,
        depp:true,
        handler(newValue,oldValue){
          console.log('sum变化了',newValue,oldValue);
        }
      }
    } */
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
